<template>
  <div  >
    <el-row :gutter="15">
      <el-col :span="12" >
        <el-card>
          <div style="font-weight:bold ;width: 100px; height: 100px; margin-top: -50px; font-size: 24px">个人资料</div>
          <div>
            <el-descriptions
              :column="1"
              size="medium"
              border>
              <el-descriptions-item>
                <template slot="label">
                  <i class="iconfont icon-id" style="margin-right: 8px;"></i>
                  用户ID
                </template>
                1
              </el-descriptions-item>
              <el-descriptions-item>
                <template slot="label">
                  <i class="iconfont icon-zhanghushezhi" style="margin-right: 8px;"></i>
                  登录角色
                </template>
                <el-tag>普通用户</el-tag>
              </el-descriptions-item>
              <el-descriptions-item>
                <template slot="label">
                  <i class="iconfont icon-xingming" style="margin-right: 8px;"></i>
                  用户姓名
                </template>
                ppp
              </el-descriptions-item>
              <el-descriptions-item>
                <template slot="label">
                  <i class="iconfont icon-nianling" style="margin-right: 8px;"></i>
                  用户年龄
                </template>
                12
              </el-descriptions-item>
              <el-descriptions-item>
                <template slot="label">
                  <i class="iconfont icon-dianhua" style="margin-right: 8px;"></i>
                  联系电话
                </template>
                11111111111
              </el-descriptions-item>
            </el-descriptions>
          </div>
        </el-card>
        <img src="@/assets/zhujiemian.jpg" style="width: 100%" />
      </el-col>

      <!--      系统通知-->
      <el-col :span="12">
        <el-card  >
          <div slot="header">
            <div style="font-weight:bold ;width: 100px; height: 100px; margin-top: -60px; font-size: 24px">
              系统通知</div>
          </div>
          <div >
            <el-timeline :reverse="true">
              <el-timeline-item color="#6495ED"  placement="top"
                                :timestamp="2024-12-12">
                <el-card>
                  <h4 class="notice-head" ></h4>
                  <p class="notice-p"></p>
                </el-card>
              </el-timeline-item>
            </el-timeline>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>

</template>




<script>


export default {
  name: "user",
  data() {
    return {
      userName:"",
      loginUser: {
        id: "",
        userName: "",
        passWord: "",
        name: "",
        age: "",
        phone: "",
      },
      //系统通知
      notices:[],
    };
  },
  methods:{
    //获取个人资料
    getLoginUser(){
      const _self = this
      _self.$http.get("/api/userInfo/"+_self.userName)
        .then(function (resp) {
          // console.log(resp.data.data)
          _self.loginUser = resp.data.data
        })
    },
    //获取系统通知
    getNotices(){
      const _self = this
      _self.$http.get("/api/notices")
        .then(function (resp) {
          _self.notices = resp.data.data
        })
    }
  },
  // mounted() {
  //   this.userName = sessionStorage.getItem("username")
  //   //显示个人信息
  //   this.getLoginUser()
  //   //显示系统通知
  //   this.getNotices()
  //   }
};
</script>

<style>
.fater-body-show .el-card{
  margin-bottom: 15px;
}
.fater-body-show .el-card__header{
  padding: 10px 10px;
}
.fater-body-show .el-card__body{
  padding: 10px 15px;
}
.notice-head{
  font-size: 16px;
  line-height: 28px;
  margin-bottom: 15px;
}
.notice-p{
  font-size: 14px;
  line-height: 28px;
}

</style>


